<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="format-detection" content="telephone=no" />
		<title>正在考试...</title>
		
		
		<link rel="stylesheet" href="utils/bootstrap-3.3.0/css/bootstrap.min.css" />
	    <link rel="stylesheet" href="utils/toastr/toastr.min.css" />
	    
		<script type="text/javascript" src="js/lib/jquery-3.0.0.min.js"></script>
		<script src="js/service/DBManager.js" type="text/javascript"></script>
		<script type="text/javascript" src="utils/bootstrap-3.3.0/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="utils/toastr/toastr.min.js" ></script>	
		<script src="utils/jquery-runner/jquery.runner-min.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/utils.js" ></script>
		
		<style>
			.fill{
				width: 100%;
			    height: 100%;
			    min-height: 100%;
			    background: #772953;
			    padding-top: 2%;
			    padding-bottom: 5%;
			}
		
		
			#runner{
				font-size: 4rem;
				color: red;
				font-family: '微软雅黑', cursive;
				font-weight: 300;
				/*text-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);*/
			}
			
			.bottom{
				margin-bottom: 30px;
				padding: 0px 10px 0px 10px;
				width: 100%;
				/*display: inline-block;*/				
			}
			
			.bottom button{
				width: 50%;
				display: inline-block;
			}
			
			pre {
				white-space: pre-wrap;
				word-wrap: break-word;		
				font-size: medium;		
			}
			
			.jumbotron>pre{
				margin: auto 10px;
			}
			
			.jumbotron>div{
				margin: 20px 10px;
				font-size: medium;
			}
			
		</style>
		
		<script>
			var answer = "";
			var quetyp = "";
			var queinr = "";
			var emeinr = "";
			var tapcnt = 0;
			var quesum = 0;
			var count = 0;
			var time = true;
			
			function submitExam(){
				getAnswer();
				if(answer == "" || answer == null || answer == undefined){					
					if(!confirm("此题未选择答案，确认进入提交吗？")){
						return;
					}
					answer = "";
				}				
				if((count < tapcnt) && time){
					if(!confirm("还有试题未完成，确认提前交卷吗？")){
						return;
					}					
				}
				$("#submit").attr('disabled',"true");
				var action = "submit";
				var argsObject = {"queinr":queinr,"answer":answer,"emeinr":emeinr};
				DBManager.getData(action,argsObject,submitHandle);
			}
			
			function submitHandle(errorCode,data){
				$("#submit").removeAttr('disabled');
				if(errorCode != 0){
					toastr.warning('交卷失败，请重试','警告!');
					return;
				}
				window.location.href = "result.html?flag=first";
			}
			
			function getNext(){					
				getAnswer();
				if($.isEmptyObject(answer)){					
					if(!confirm("此题未选择答案，确认进入下一题吗？")){
						return;
					}
					answer = "";
				}
				$("#next").attr('disabled',"true");
				var action = "next";
				var argsObject = {"queinr":queinr,"answer":answer,"emeinr":emeinr};
				DBManager.getData(action,argsObject,fillData);
			}
			
			function fillData(errorCode,data){
				$("#next").removeAttr('disabled');
				if(errorCode != 0){
					toastr.warning('获取题目失败，请重试','警告!');
					return;
				}
				queinr = data["queinr"];				
				count +=  1;
				if(count == tapcnt){
					changeButton();  
				}
				$("#remain").html(tapcnt-count);
				quetyp = data["quetyp"];
				var que = data["que"];				
				var answra = data["answra"];
				var answrb = data["answrb"];
				var answrc = data["answrc"];
				var answrd = data["answrd"];
				var src = data["scr"]
//				writeQuestion("2.请问宇宙之外是什么？","宇宙","外世界","虚无","神经病","2");
				writeQuestion($.trim(que),answra,answrb,answrc,answrd,quetyp,src);
			}
			
			function getAnswer(){
				var ans = "";
				if(quetyp == "1"){
					ans = $(".jumbotron input[type='radio']:checked").val();		
				}else if(quetyp == "2"){
					var anslist = [];
					$(".jumbotron input[type='checkbox']:checked").each(function(){
						anslist.push($(this).val());
					})
					ans = anslist.join(",");
				}
				answer = ans;				
			}
			
			function getStart(){
				
				var tpainr = $.getUrlVar('tpainr');
				var action = "start";				
//				var argsObject = {"username":username,"role":role};
				var argsObject = {"tpainr":tpainr};
				DBManager.getData(action,argsObject,fillStartData);
			}
			
			function fillStartData(errorCode,data){
				if(errorCode != 0){
					toastr.warning('获取题目失败，请重试','警告!');
					return;
				}
				
//				writeQuestion("1.请问宇宙有没有边asdasdasdasdasdadadasdasdasdasdasdasdasd界？","有","没有","不知道","神经病","S");
				
				var emeflg = data['emeflg'];
//				toastr.info("emeflg:"+emeflg);
				if(emeflg == '1'){
					window.location.href = "result.html";
					return;
				}else if(emeflg=="2"){					
					toastr.info("欢迎回到考试");
				}
				
				queinr = data["queinr"];
				quetyp = data["quetyp"];
				tapcnt = data["quesum"];//试题总数
				emeinr = data["emeinr"];				
				var quenum = data["quenum"];//开始题号
				if(quenum == "" || quenum == null || quenum == undefined ){
					count = 1;
				}else{
					count = quenum;	
				}
				 
				$("#total").html(tapcnt);
				$("#remain").html(tapcnt-count);
				var taptim = data["tpatim"];				
				setCountDown(taptim);
//				setCountDown(1);
				var que = data["que"];
				var answra = data["answra"];
				var answrb = data["answrb"];
				var answrc = data["answrc"];
				var answrd = data["answrd"];
				var src = data["scr"]
				if(!src){
					src = 0;
				}
				writeQuestion($.trim(que),answra,answrb,answrc,answrd,quetyp,src);
			}

			function writeQuestion(que,ans1,ans2,ans3,ans4,quetyp,src){				
				var anslst = [ans1,ans2,ans3,ans4];
				var keylst = ["A","B","C","D"]
				$("#que").text("  " + count + ".(" +src +"分)" + que);
				var divcls = "radio";
				var inptyp = "radio";
				if(quetyp == "2"){
					divcls = "checkbox";
					inptyp = "checkbox";
				}
				$("#tpabody>div").each(function(){
					$(this).removeClass().addClass(divcls);
				});
				$("#tpabody>div input").each(function(index){
					$(this).attr("type",inptyp);
					$(this).attr("value",keylst[index]);					
				});
				
				$("#tpabody>div input:checked").each(function(index){
					$(this).prop("checked",false);
				});
				
				$("#tpabody>div span").each(function(index){
					$(this).text(anslst[index]);
				});
			}

			function setCountDown(time){
				$("#runner").runner({
					autostart:true,
					countdown: true,
    				startAt: time * 60 * 1000,
    				stopAt:0,
    				milliseconds:false,
				}).on('runnerFinish', function(eventObject, info) {
					changeButton();
					time = false;
					alert('考试结束!请交卷');				
				});
			}
			
			function changeButton(){
			    $("#submit").text("交卷");
				$("#submit").removeClass("btn-default").addClass("btn-primary");
				$("#submit").css("width","100%");
				$("#submit").show();				
				$("#next").hide();				
			}
			
			$(function(){
				

				getStart();
				$("#next").click(getNext);
				$("#submit").click(submitExam);
			})
			
		</script>
		
	</head>
	<body>
		<div>
			<nav class="navbar navbar-default" role="navigation">
			  <div class="container-fluid">			    
			    <div class="navbar-header">			      
			    	<a class="navbar-brand" href="#">
				        <img alt="Brilliance" style="margin-top: -6px" src="img/LOGO1.png">
				    </a>
			      	<a class="navbar-brand" href="#">Brilliance ExamSystem</a>			      	
			    </div>
			  </div>
			</nav>
			
			<div class="container-fluid">
				<div class="row text-center">
					<span id="runner"></span>
				</div>
				<div class="row">
					<p class="text-center">本试卷共有
						<span id="total" class="text-primary">0</span> 题，还剩余
						<span id="remain" class="text-danger">0</span> 题</p>
				</div>
				<div class="jumbotron" id="tpabody">
					<pre id='que'></pre>
					<div>
						<label id="answerA">
							<input id="A" type="radio" name="answer" value="" />
							<span for="A"></span>
						</label>
					</div>
					<div>
						<label id="answerB">
							<input type="radio" name="answer" value="" />
							<span></span>
						</label>
					</div>
					<div>
						<label id="answerC">
							<input type="radio" name="answer" value="" />
							<span></span>
						</label>
					</div>
					<div>
						<label id="answerD">
							<input type="radio" name="answer" value="" />
							<span></span>
						</label>
					</div>
				</div>
			</div>
			
			<div class="bottom text-center">
				<button id="next" class="btn btn-primary" >下一题</button><button id="submit" class="btn btn-default">提前交卷</button>				
			</div>
		</div>
		
	</body>
</html>
